<template>
    <div class="myCollection-root">
        <public-header>
            <i slot="icon" class="icon-chevron-left" @click="change"></i>
            <p slot="text" class="title">我的消息</p>
        </public-header>
        <div class="myCollection-content">
            <div class="headerr">
                <span class="message">未读消息</span><span class="count" v-if="show" @click="mark">{{hasnot.length}}</span>
            </div>
            <div class="empty empty1"></div>
            <div class="nocountmessage" v-for="r in hasnot">
                <div class="hasnot-title">
                    <img :src="r.author.avatar_url" alt="">
                    <span class="hasnot-name">{{r.author.loginname}}</span>
                </div>
                <p class="content-title"><span class="content-title">消息内容：</span>{{r.reply.content}}</p>
            </div>
            <div class="headerr headerr2">
                <span class="message">已读消息</span><span class="count nocount">{{has.length}}</span>
            </div>
            <div class="empty empty2"></div>
            <div class="countmessage" v-for="r in has">
                <div class="hasnot-title">
                    <img :src="r.author.avatar_url" alt="">
                    <span class="hasnot-name">{{r.author.loginname}}</span>
                </div>
                <p class="content-title"><span class="content-title">消息内容：</span>{{r.reply.content}}</p>
            </div>
        </div>
    </div>
</template>

<script>
    import PublicHeader from '../components/Header'
    export default{
        data(){
            return{
                has:[],
                hasnot:[],
                show:true
            }
        },
        components:{
            PublicHeader
        },
        methods:{
            change(){
                this.$router.go(-1)
            },
            mark(){
                //标记全部已读
                var accesstoken=localStorage.getItem('accesstoken')
                var data={"accesstoken":accesstoken}
                this.axios.post('/vueapi/v1/message/mark_all',data)
                .then(data=>{
                    console.log(data)
                })
                .catch(err=>{
                    console.log(err)
                })
            }
        },
        created(){       
            var accesstoken=localStorage.getItem('accesstoken')
            //已读未读
            this.axios.get('/vueapi/v1/messages/?accesstoken='+accesstoken)
            .then(data=>{
                //console.log(data.data.data)//Object {has_read_messages: Array(0), hasnot_read_messages: Array(0)}     
                var  html1=document.getElementsByClassName('empty1')[0]
                var  html2=document.getElementsByClassName('empty2')[0]   
                console.log(html1)  
                this.has=data.data.data.has_read_messages
                this.hasnot=data.data.data.hasnot_read_messages
                if(this.hasnot.length==0){
                    this.show=false
                    html1.innerHTML='暂无未读消息'
                }
                if(this.has.length==0){
                    html2.innerHTML='暂无已读消息'
                }
                //已读消息
                // console.log(this.has)
                //未读消息
                // console.log(this.hasnot)               
            })
            .catch(err=>{
                console.log(err)
            })
            
        }
    }
</script>

<style scoped>
    .icon-chevron-left{
        font-size: 18px;
        margin-left: 20px;
        color: #fff;
    }
    .myCollection-content{
        padding: 64px 15px 0 15px;
    }
    .message{
        font-size: 16px;
        color: #0e77e4;
    }
    .count{
        width: 30px;
        height: 30px;
        padding: 2px 6px;
        border: 1px solid #0e77e4;
        border-radius: 50%;
        margin-left: 20px;
        color: red;
    }
    .hasnot-title{
        margin-top: 20px;
    }
    img{
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin-bottom: 10px;
    }
    .hasnot-name{
        margin-left: 10px;
        position: relative;
        top: -20px;
        font-size: 14px;
        color: #999;
    }
    p.content-title{
        font-size: 15px;
        color: #666;
    }
    span.content-title{
        font-size: 15px;
        color: #333;
    }
    .nocountmessage{
        border-bottom: 1px solid #ccc;
        margin-bottom: 30px;
    }
    
    span.nocount{
        border: 0;
        color: #0e77e4;
    }
    .headerr2{
        margin-top: 20px;
    }
    .empty{
        margin: 30px 0;
        color: #999;
        font-size: 20px;
    }
</style>